<template>
  <div>
    <van-nav-bar
      style="background-color: Gainsboro;"
      title="编辑资料"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="main" v-for="item in user" :key="item.id">
      <router-link to="/user/avatar">
        <div class="item">
          <p>头像</p>
          <div class="right">
            <img :src="item.user_avator" style="width: 1.5rem;padding: 0,margin: 0;;" alt="">
            <van-icon name="arrow" />
          </div>
        </div>
      </router-link>
      <router-link to="/user/username">
        <div class="item">
          <p>昵称</p>
          <div class="right" style="display: flex;">
            <p style="color: #9a9a9a; margin-right: 5px;">{{ item.nickname }}</p>
            <van-icon name="arrow" />
          </div>
        </div>
      </router-link>
      <router-link to="/user/set">
        <div class="item">
          <p>性别</p>
          <div class="right" style="display: flex;">
            <p style="color: #9a9a9a; margin-right: 5px;">{{ item.gender }}</p>
            <van-icon name="arrow" />
          </div>
        </div>
      </router-link>
      <router-link to="/user/birthday">
        <div class="item">
          <p>生日</p>
          <div class="right" style="display: flex;">
            <p style="color: #9a9a9a; margin-right: 5px;">{{ item.birthday }}</p>
            <van-icon name="arrow" />
          </div>
        </div>
      </router-link>
      <router-link to="/user/phone">
        <div class="item">
          <p>手机号码</p>
          <div class="right" style="display: flex;">
            <p style="color: #9a9a9a; margin-right: 5px;">{{ item.phone }}</p>
            <van-icon name="arrow" />
          </div>
        </div>
      </router-link>
      <router-link to="/user/password">
        <div class="item">
          <p>修改密码</p>
          <div class="right" style="display: flex;">
            <p style="color: #9a9a9a; margin-right: 5px;">******</p>
            <van-icon name="arrow" />
          </div>
        </div>
      </router-link>
        <div class="item">
          <p>微信</p>
          <div class="right" style="display: flex;">
            <p style="color: #9a9a9a; margin-right: 5px;">未绑定</p>
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="item">
          <p>QQ</p>
          <div class="right" style="display: flex;">
            <p style="color: #9a9a9a; margin-right: 5px;">未绑定</p>
            <van-icon name="arrow" />
          </div>
        </div>
        <div class="item">
          <p>微博</p>
          <div class="right" style="display: flex;">
            <p style="color: #9a9a9a; margin-right: 5px;">未绑定</p>
            <van-icon name="arrow" />
          </div>
        </div>
    </div>
  </div>
</template>

<script>
import httpApi from '@/http';

  export default {
    data() {
      return {
        userid: '',
        user:{
          retule:[]
        }
      }
    },

    methods: {
      onClickLeft() {
        this.$router.push('/home/my')
      },

      getUser(){
        let params = {cid: 1,page:1,pagesize:1}
        httpApi.userApi.queryByUserId(params).then(res=>{
          this.user = res.data.data.result
          console.log('我的',this.user)
          console.log(1)
          console.log(res.data.data.result.userid)
          console.log(this.user.userid)
          console.log(this.form.userid)
          console.log(this.userid)
        })
      }
    },
    mounted () {
      this.getUser()
    },
  }
</script>

<style lang="scss" scoped>
.item{
  display: flex; 
  justify-content: space-between;
  font-size: 18px;
  padding: 16px 22px;
  border-bottom: 2px solid rgb(228, 211, 211);
}

</style>